import React, {useEffect, useState} from "react";
import {RPage} from "@/api/Objects";
import {PojBaseData} from "@/api/Objects/PojTypes.ts";
import EmptyPage from "@/components/EnptyPage.tsx";
import PojApi from "@/api/PojApi.ts";
import PojInfoCard from "@/components/PojInfoCard.tsx";
import {createStyles} from "antd-style";
import BackgroundImage from "@/components/BackgroundImage.tsx";
import MainHeader from "@/pages/MainPage/MainHeader.tsx";

const useStyles = createStyles(({css, token}) => {
    return {
        container: css`
            width: 1200px;
            @media screen and (max-width: 1200px) {
                width: 100vw;
            }
            margin: 0 auto;
            background-color: transparent;
            backdrop-filter: brightness(1.1) blur(10px);
            box-shadow: 0 0 10px #606060;
        `,
        cardListContainer: css`
            
        `,
    }
})

const MainPage: React.FC = () => {
    const [pojInfoPage, setPojInfoPage] = useState<RPage<PojBaseData>>()
    const styles = useStyles().styles;

    useEffect(() => {
        PojApi.pagePojInfo().then(data => {
            setPojInfoPage(data)
        })
    }, []);

    if (pojInfoPage == null) {
        return (
            <EmptyPage/>
        )
    }

    return (
        <>
            <div className={styles.container}>
                <MainHeader/>
                <ul className={styles.cardListContainer}>
                    {
                        pojInfoPage.records.map(item => {
                            return (
                                <li key={item.id}>
                                    <PojInfoCard pojInfoVo={item}/>
                                </li>
                            )
                        })
                    }
                </ul>
            </div>
            <BackgroundImage/>
        </>
    )
}

export default MainPage